<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>地图</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../assets/css/unpkg/swiper.min.css">
    <link href="../assets/layui-v2.5.6/css/layui.css" rel="stylesheet">
    <!--地图展示-->
    <link href="../assets/css/autocomplete.css" rel="stylesheet">
    <!-- Swiper JS -->
    <script src="../assets/js/unpkg/swiper.min.js"></script>
    <!--    引入jquery     -->
    <script src="../assets/js/jquery/jquery.min.js"></script>
    <script src="../assets/js/jquery/jquery.sidebar.min.js"></script>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="../assets/js/unpkg/popper.js"></script>
    <script src="../assets/js/bootstrap/bootstrap.js"></script>
    <script src="../assets/js/jquery/jquery.autocomplete.js"></script>
    <script src="https://cdn.bootcss.com/jquery-sidebar/3.3.2/jquery.sidebar.min.js"></script>
    <!--引入mapbox-->
    <script src='../assets/js/mapbox/mapbox-gl.js'></script>
    <link href='../assets/css/mapbox/mapbox-gl.css' rel='stylesheet' />
    <!--地图展示-->
    <link href="../assets/css/historymapbook.css" rel="stylesheet">

    <link href="../assets/css/spinkit.css" rel="stylesheet">
    <link href="../assets/css/siderbar.css" rel="stylesheet">
    <link href="../assets/css/poem-1.css" rel="stylesheet">

    <script src='../assets/js/mapbox/mapbox-gl-language.js'></script>
    <script src="../assets/js/unpkg/intersection-observer.js"></script>
    <script src="../assets/js/unpkg/scrollama.js"></script>
    <script src="../assets/js/mapbook/mapbook.js"></script>
    <script src="../assets/js/mapbook/historymapbook.js"></script>
    <script src="../assets/js/config/config.js"></script>
    <script src="../assets/js/page/simple.js"></script>
    <script src="../assets/js/page/blocked.js"></script>
    <script src="../assets/js/book/book.js"></script>
    <script src="../assets/js/book/historybook.js"></script>
    <script src="../assets/js/plugins/plugin.js"></script>
    <script src="../assets/js/plugins/scroller.js"></script>
    <script src="../assets/js/plugins/rasterdem.js"></script>
    <script src="../assets/js/maploader/simple.js"></script>
    <script src="../assets/js/maploader/rasterdem.js"></script>
    <script src="../assets/js/sidebar.js"></script>
    <script src="../assets/js/searchbar.js"></script>
    <link href="../assets/css/siderbar.css" rel="stylesheet">
    <script src="../assets/layui-v2.5.6/layui.js"></script>
    <script src="../assets/js/infolayer.js"></script>
    <script src="../assets/js/common.js"></script>
    <script src="../assets/js/sidebar2.js"></script>
    <script src="../assets/js/infolayer2.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        /*设置滚动条样式*/
        ::-webkit-scrollbar {
            width: 0px;
        }
    </style>
    </style>
</head>

<body>

    <div id='map'></div>
    <div style="text-align: center;position: relative;top: 10px;"><button class="btn btn-primary">跟着地图学古诗</button></div>
    <div id="searchbar"></div>
    <div class="book-container"></div>
    <div id="sidebar" class="sidebar-hide">
        
    </div>

    <div id="info-layer" class="info-layer info-layer-hide">
        
    </div>

    <div class="btn-group toolbar">
        <div class="btn-group">
            <button id="catalog-current" type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">
                目录</button>
            <div id="catalog-dropdown-menu" class="dropdown-menu">
            </div>
        </div>
        <a class="btn btn-light" href="../dataManagement/" target="_blank">管理后台</a>
    </div>


    <script>
        var historymapbook = new HistoryMapBook();
        historymapbook.book.setPageFactory(new BlockPageFactory());
        historymapbook.setMapLoader(new DemMapLoader());
        historymapbook.loadBook('#map', '.book-container', config);

        //搜索条
        var searchbar = new SearchBar("searchbar");

        historymapbook.onMarkerClicked = function (event) {
            new SideBar2().open();
        };

        var infolayer = new InfoLayer2();

    </script>

</body>

</html>